<template>
  <div className="info-card">
    <h3>基本信息</h3>
    <div className="info-container">
      <div className="profile-image">
        <img :src="doctor.avatar" width="100px" alt="Profile Image"/>
      </div>
      <div className="info-details">
        <table>
          <tr>
            <td>ID:</td>
            <td>{{ doctor.doctorId }}</td>
            <td>姓名:</td>
            <td>{{ doctor.doctorName }}</td>
          </tr>
          <tr>
            <td>手机号:</td>
            <td>{{ doctor.phoneNumber }}</td>
            <td>平台科室:</td>
            <td>{{ doctor.department }}</td>
          </tr>
          <tr>
            <td>性别:</td>
            <td>{{ doctor.sex == '1' ? '男' : '女' }}</td>
            <td>医院:</td>
            <td>{{ doctor.hospital }}</td>
          </tr>
          <tr>
            <td>职称:</td>
            <td>{{ doctor.title }}</td>
            <td>加入时间:</td>
            <td>{{ doctor.joinDate }}</td>
          </tr>
          <tr>
            <td>简介:</td>
            <td colspan="3">{{ doctor.intro }}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { getDoctorDetail, getList } from '@/api/doctors/doctors'

export default {
  data() {
    return {
      doctor: {
        doctorId: '',//医生ID
        doctorName: '', //医生姓名
        phoneNumber: '', //手机号
        department: '', //平台科室
        sex: '', //性别
        hospital: '', //医院
        title: '',  //职称
        joinDate: '', //加入时间
        avatar: '', // 请替换成实际的图片链接
        intro: '', // 简介
      },
      //根据路由 传过来的 id获取医生信息
      id: this.$route.params.doctorId,//获取路由参数 id 值



    };

  },

  methods: {
    //执行获取医生信息的函数
    findDoctor() {
      getDoctorDetail(this.id).then(response => {
        this.doctor = response.data;
        console.log(this.doctor)
      })
    },
  },
  created()
  {
    this.findDoctor()
    console.log("钩子执行了")
  }
};
</script>

<style scoped>
.info-card {
  background-color: #f0f8ff;
  padding: 20px;
  border-radius: 5px;
  max-width: 800px;
  margin: auto;
}

.info-container {
  display: flex;
}

.profile-image {
  flex: 1;
  padding: 10px;
}

.profile-image img {
  width: 100%;
  border-radius: 5px;
}

.info-details {
  flex: 2;
  padding: 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  padding: 8px;
  border: 1px solid #ddd;
}

h3 {
  margin-bottom: 15px;
}
</style>
